import Taro, { redirectTo, setNavigationBarTitle } from '@tarojs/taro'
import { View, Image, Text, Form, Input, Button } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtInput } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api, { host } from '../../utils/api'
import request from '../../utils/request'
import { useAsyncEffect } from '../../utils/index'

import IconContract from '../../images/icon-contract.png'
import IconDocument from '../../images/icon-document.png'
import IconDownload from '../../images/icon-download.png'

import './bank.less'

function Bank() {
  useEffect(() => {
    try {
      setNavigationBarTitle({
        title: '银行信息'
      })
      request(api.userInfo, 'GET').then(res => {
        let data = res.member
        setUserInfo(data)
        setBankName(data.bank_title)
        setBankNumber(data.bank_number)
      })
    } catch (error) {
      console.log(error)
      Taro.showToast({
        title: '获取用户信息失败',
        icon: 'none'
      })
    }
  }, [])

  const [userInfo, setUserInfo] = useState({})
  const [isLoading, setLoading] = useState(false)
  const [bank_name, setBankName] = useState('')
  const [bank_number, setBankNumber] = useState('')
  const onSubmitFrom = (e) => {
    setLoading(true)
    let data = e.detail.value
    request(api.updateBank, 'POST', {
        bank_title: data.bank_name,
        bank_number: data.bank_number
    }).then(res => {
      setLoading(false)
      Taro.showToast({
        title: '修改成功',
        icon: 'none'
      })
      request(api.userInfo, 'GET').then(res => {
        let data = res.member
        setUserInfo(data)
      })
    }).catch(() => {
      setLoading(false)
    })
  }
  const handleName = (e) => {
    setBankName(e.detail.value)
  }
  const handleNumber = (e) => {
    setBankNumber(e.detail.value)
  }
  return (
    <View className='bank'>
      <View className='layout'>
        <View className='bg'></View>
        <View className='top'></View>
        <View className='cell-group group'>
          <Form className="form" onSubmit={onSubmitFrom}>
            <View className="form-item">
              <View className="label">户名</View>
              <Input disabled name='real_name' type='text' value={userInfo.real_name} className="input" placeholder='请输入户名'></Input>
            </View>
            <View className="form-item">
              <View className="label">开户银行</View>
              <Input name='bank_name' onInput={handleName} value={bank_name} type='text' className="input" placeholder='请输入开户银行'></Input>
            </View>
            <View className="form-item">
              <View className="label">银行卡号</View>
              <Input name='bank_number' onInput={handleNumber} value={bank_number} type='text' className="input" placeholder='请输入银行卡号'></Input>
            </View>
            <Button disabled={isLoading} className="form-button" formType="submit">修改</Button>
          </Form>
        </View>
      </View>
    </View>
  )
}

export default Bank
